<template>
  <section
    class="login-page"
    :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"
  >
    <div v-if="isNotEntry" class="not-entry">
      <h1 class="system-title-image">
        {{ title }}
      </h1>
      <div class="flex align-center justify-around entry-image">
        <router-link :to="{ name: 'Login', query: { entry: 1 } }">
          <img src="./entry-1.png" alt="政府" />
        </router-link>
        <router-link :to="{ name: 'Login', query: { entry: 2 } }">
          <img src="./entry-2.png" alt="企业" />
        </router-link>
      </div>
    </div>
    <div v-else class="flex-center direction-column login-page-main">
      <h1 class="system-title">{{ title }}</h1>
      <el-card class="form" shadow="never">
        <div class="text-center form-title">
          <h1>用户登录</h1>
        </div>
        <el-form size="large" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model="account"
              placeholder="账号"
              type="text"
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="password"
              placeholder="密码"
              type="password"
              prefix-icon="el-icon-lock"
              @focus="psdFocus"
              @blur="psdBlur"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="submitting"
              class="submit-button"
              native-type="submit"
              type="primary"
              @click="onSubmit"
            >
              登&nbsp;录
            </el-button>
          </el-form-item>
        </el-form>
        <span class="card-corner top-right"></span>
        <span class="card-corner bottom-right"></span>
        <span class="card-corner bottom-left"></span>
        <span class="card-corner top-left"></span>
      </el-card>
    </div>
  </section>
</template>

<script>
import bg1 from './login-bg1.png';
import bg2 from './login-bg2.png';
import { getAccountPwd, setAccountPwd } from '@/utils';
import fullscreen from 'fullscreen.js'

export default {
  name: 'login-index',
  data() {
    return {
      account: '',
      password: '',
      rememberPwd: false,
      submitting: false,

      psdType: 'text'
    };
  },
  computed: {
    title() {
      return this.$store.state.logoTitle;
    },
    isNotEntry() {
      const { entry } = this.$route.query;
      return entry == null;
    },
    backgroundImage() {
      return this.isNotEntry ? bg1 : bg2;
    }
  },
  watch: {
    '$route.query.entry': function () {
      this.autoComplete();
    }
  },
  mounted() {
    this.autoComplete();
  },
  methods: {
    psdFocus() {
      this.psdType = 'password';
    },
    psdBlur() {
      if (String(this.password).length === 0) {
        this.psdType = 'text';
      }
    },
    autoComplete() {
      let accountPwd = getAccountPwd();
      const { entry } = this.$route.query;
      try {
        accountPwd = JSON.parse(accountPwd);
        if (accountPwd && String(entry) === accountPwd.accountType) {
          this.rememberPwd = true;
          this.account = accountPwd.account;
          this.password = accountPwd.password;
        } else {
          this.rememberPwd = false;
          this.account = '';
          this.password = '';
        }
      } catch (e) {}
    },
    openFullScreen () {
      const enable = fullscreen.enabled()
      if (enable) {
        fullscreen.request()
      }
    },
    onSubmit() {
      const { account, password, rememberPwd } = this;
      let accountType = '';
      const { entry } = this.$route.query;
      // eslint-disable-next-line
      if (entry == 1) {
        accountType = '1';
        // eslint-disable-next-line
      } else if (entry == 2) {
        accountType = '2';
      }
      let errMsg = '';
      if (!account) {
        errMsg = '请输入账号';
      }
      if (!password) {
        errMsg = '请输入密码';
      }

      if (errMsg) {
        return this.$message.error(errMsg);
      }
      this.submitting = true;
      this.$store
        .dispatch('user/login', {
          loginName: (this.account || '').replace(/\s/g, ''),
          passWord: (this.password || '').trim(),
          accountType
        })
        .then(() => {
          setAccountPwd(
            rememberPwd
              ? JSON.stringify({
                  account: this.account,
                  password: this.password,
                  accountType
                })
              : null
          );
          const path = this.$route.query.returnUrl || '/';
          if (accountType === '1') {
            this.openFullScreen()
          }
          this.$router.replace(
            {
              path: path
            },
            err => {
              console.log(err);
            }
          );
        })
        .finally(() => {
          this.submitting = false;
        });
    }
  }
};
</script>

<style scoped>
.login-page {
  --color-background: #070c41;
  --color-border-card: #0b2060;
  --color-border-input: #0c4071;
  --color-border-input-active: #0d98ca;
  --gradient-submit-button: linear-gradient(to bottom, #00b8ff, #0178e5);
  --gradient-submit-button-active: linear-gradient(to bottom, #0e83d8, #0178e5);

  --height-input: 50px;

  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--color-background);
  background-repeat: no-repeat;
  background-size: cover;
}
.login-page-main {
  width: 47.7%;
  height: 100%;
  float: right;
}
@media screen and (max-width: 1000px) {
  .login-page-main {
    width: 100%;
  }
  .form {
    background: var(--color-background) !important;
  }
}
.system-title {
  font-size: 5.6vh;
  color: white;
  margin-bottom: 3rem;
  margin-top: -7rem;
}
.system-title-image {
  text-align: center;
  color: #03c0ff;
  font-size: 7vh;
  margin-top: 7vh;
}
.entry-image {
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}
.entry-image img {
  height: 38.88vh;
  width: auto;
  max-width: 100%;
}
.system-title-image img {
  margin-top: 3rem;
  height: 12.5vh;
  width: auto;
  max-width: 100%;
}
.form {
  width: 25vw;
  min-width: 400px;
  box-sizing: border-box;
  border: 1px solid var(--color-border-card);
  background: rgba(255, 255, 255, 0.05);
  font-family: 黑体, sans-serif;
  color: white;
  position: relative;
}
.card-corner {
  position: absolute;
  width: 39px;
  height: 39px;
  background-image: url('./card-corner.png');
}
.top-right {
  right: 0;
  top: 0;
  transform: rotate(-90deg);
}
.top-left {
  left: 0;
  top: 0;
  transform: rotate(-180deg);
}
.bottom-left {
  left: 0;
  bottom: 0;
  transform: rotate(90deg);
}
.bottom-right {
  right: 0;
  bottom: 0;
}
.form-title {
  margin-top: 3rem;
  margin-bottom: 2rem;
  font-size: 1.2rem;
  letter-spacing: 5px;
}
.form ::v-deep .el-input {
  font-size: 1.1rem;
}
.form ::v-deep .el-input--prefix .el-input__inner {
  padding-left: 3rem;
  color: var(--color-border-input-active);
}
.form ::v-deep .el-input__prefix {
  left: 0.8rem;
}
.form ::v-deep .el-input__inner {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border-input);
}
.form ::v-deep .el-input__inner,
.form ::v-deep .el-input__icon {
  height: var(--height-input);
  line-height: var(--height-input);
}
.form ::v-deep .el-input__icon {
  font-size: 1.2rem;
}
.form ::v-deep .el-input__inner:focus,
.form ::v-deep .el-input__inner:active {
  background-color: transparent;
  border-color: var(--color-border-input-active);
}
.form ::v-deep .el-card__body {
  padding-left: 3rem;
  padding-right: 3rem;
}
.form ::v-deep .el-checkbox {
  color: white;
}
.form ::v-deep .el-checkbox__inner {
  background: transparent;
  border-color: var(--color-border-input-active);
}
.form ::v-deep .el-checkbox__input + .el-checkbox__label,
.form ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #ccc;
}
.submit-button {
  display: block;
  width: 100%;
  border: none;
  font-size: 1.1rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  background: var(--gradient-submit-button);
}
.submit-button:focus,
.submit-button:active,
.submit-button:hover {
  background: var(--gradient-submit-button-active) !important;
}
</style>
